<template>
  <div>
    <a-card class="cardBox flowPath">
      <div class="tit" slot="title">流程再造
        <div class="buts">
          <a-button size="small" class="but-blue" @click="recceClick(1)">勘景</a-button>
          <a-button size="small" class="but-orange" @click="recceClick(2)">参演</a-button>
        </div>
      </div>
      <div class="content">
        <div class="contentText">
          创新人才服务体系，为演职人员提供就业、生活等阳光、全流程服务，实现影视人才学习-工作-生活闭环管理。重塑剧组拍摄机制，提供生产要素一站式供给，形成剧本到内容的产业链闭环，真正实现“拿着剧本来，带着作品走”的横店拍摄模式。提供理论支持，编制国际性指数、综合景气指数、集聚区指数、发展环境指数、影响力指数、产业创新指数，迭代横店牵头编制的国标《影视拍摄基地服务规范》等标准，为影视产业数字化赋能。
        </div>
        <a-card style="margin-top: 20px">
          <div class="reformBefore">改革前：业务流程繁杂且信息化程度低，缺少政府侧服务和管理指导</div>
          <img src="@/assets/img/liu1.png" style="max-width: 100%">
        </a-card>
        <a-card style="margin-top: 20px">
          <div class="reformAfter">改革后：打造全产业链、全流程闭环管理，推动“未来影视工厂”建设，真正形成“拿着剧本来，带着作品走”的横店模式</div>
          <img src="@/assets/img/liu2.png" style="max-width: 100%">
        </a-card>
      </div>
    </a-card>
    <a-modal v-model="recceVisible" width="70%" :footer="null" :centered="true" title="云勘景场景">
      <div class="modalContent">
        <div class="subCon">
          <div class="biaoti">改革前痛点：效率低、成本高、时间协调困难</div>
          <a-row :gutter="16">
            <a-col :span="12">
              <a-card size="small" :headStyle="{backgroundColor: '#eee'}">
                <div class="subCardTit grey" slot="title">改革前</div>
                <div class="subCardTxt">
                  <img src="@/assets/img/lc1.png">
                </div>
              </a-card>
            </a-col>
            <a-col :span="12">
              <a-card size="small" :headStyle="{backgroundColor: '#e6f7ff'}">
                <div class="subCardTit" slot="title">改革后</div>
                <div class="subCardTxt" style="height: 648px;">
                  <img src="@/assets/img/lc2.png">
                </div>
              </a-card>
            </a-col>
          </a-row>
        </div>
      </div>
    </a-modal>
    <a-modal v-model="partInVisible" width="70%" :footer="null" :centered="true" title="横影通场景">
      <div class="modalContent">
        <div class="subCon">
          <div class="biaoti">改革前痛点：手续多</div>
          <a-row :gutter="16">
            <a-col :span="12">
              <a-card size="small" :headStyle="{backgroundColor: '#eee'}">
                <div class="subCardTit grey" slot="title">改革前</div>
                <div class="subCardTxt">
                  <img src="@/assets/img/lc3.png">
                </div>
              </a-card>
            </a-col>
            <a-col :span="12">
              <a-card size="small" :headStyle="{backgroundColor: '#e6f7ff'}">
                <div class="subCardTit" slot="title">改革后</div>
                <div class="subCardTxt" style="height: 562px;">
                  <img src="@/assets/img/lc4.png">
                </div>
              </a-card>
            </a-col>
          </a-row>
        </div>
      </div>
    </a-modal>
  </div>
</template>

<script>
  export default {
    name: 'HytBoard6',
    data () {
      return {
        recceVisible: false,
        partInVisible: false
      }
    },
    mounted () {

    },
    watch: {
    },
    methods: {
      recceClick (type) {
        if (type === 1) {
          this.recceVisible = true
        } else {
          this.partInVisible = true
        }
      }
    }
  }
</script>

<style scoped lang="less">
  .cardBox {
    margin-bottom: 16px;
    box-shadow: 0 0 12px rgba(0,0,0,.15);

    .tit {
      position: relative;
      padding-left: 8px; font-size: 20px;
    }

    .tit::before {
      display: inline-block;
      content: '';
      width: 2px;
      position: absolute;
      left: 0;
      top: 2px;
      bottom: 2px;
      background: #1890ff
    }
  }
  .buts { float: right;
    .ant-btn { margin-left: 10px; color: #fff;}
    .but-blue {background: #4c93ff; border-color: #4c93ff}
    .but-orange {background: #ec8b37; border-color: #ec8b37}
  }
  .filesImg {max-width: 100%; display: block; margin: auto}
  .modalContent {
    height: auto; padding-right: 10px; overflow-x: hidden; overflow-y: auto;
    .biaoti {
      background: #f8f8f8;
      margin-bottom: 16px;
      font-size: 15px;
      padding: 8px 15px; position: relative;
    }

    .biaoti::before {
      display: inline-block;
      content: '';
      width: 2px;
      position: absolute;
      left: 0;
      top: 0;
      bottom: 0;
      background: #1890ff
    }
  }
  .flowPath {
    .subTit {
      width: 100%;
      margin: auto;
      border-radius: 5px;
      color: #1890ff;
      padding: 8px 0;
      font-size: 20px;
      background: #e6f7ff;
      text-align: center;
    }

    .subCon {
      padding-top: 20px;
    }

    .subCardTit {
      text-align: center; color: #1890ff; font-weight: bold;}
    .grey {
      color: #999
    }
    .subCardTxt { width: 100%; text-align: center;
      img { display: inline-block; vertical-align:middle}
    }
  }
  .contentText {
    background: #eee;
    border-radius: 6px;
    padding: 8px 12px; font-size: 16px; margin: 0 5px;
  }
  .reformBefore {
    background: #f8f8f8;
    margin-bottom: 16px; color: #8e8c8c;border-radius: 5px;
    font-size: 17px;
    padding: 8px 15px;
    position: relative;
  }
  .reformAfter {
    background: #ee9a46;
    font-size: 17px;
    padding: 8px 15px;color: #fff; margin-bottom: 15px;
    border-radius: 5px;
    position: relative;
  }
</style>
